import Bg from '@/assets/bg-2.jpg'
import StartBg from '@/assets/bg-1.jpg'
import Button from '@/assets/button-1.png'
import Kang from '@/assets/kang-1.png'
import Title from '@/assets/title-1.png'


import AniamteImage1 from '@/assets/index-2.png'

import useSvga from '@/hooks/useSvga'

import '@animxyz/core'
import { XyzTransitionGroup } from '@animxyz/react'
import { history } from 'umi'

import React, { useEffect, useState } from 'react'
import { Log } from '@/api'
import { hooks, Loading } from 'react-vant'
import delay from 'delay'

// ? 设置倒计时n
const leftTime = 7

export default function HomePage() {
  const [step, setStep] = useState<0 | 1 | 2 | 3>(0)
  const { init, player } = useSvga('/index-1.svga?v=1.0.1', {
    isCacheFrames: true,
    loop: 1
  })

  const { current, reset, start } = hooks.useCountDown({
    time: leftTime * 1000,
    onFinish: function () {
      reset(leftTime * 1000)
      setStep(1)
      handleAnimateStart()
    }
  });

  async function handleAnimateStart() {
    await delay(1000)
    setStep(2)
    player.current?.start()
    await delay(500)
    setStep(3)
    start()
  }

  useEffect(() => {
    init(document.getElementById('svga-canvas') as HTMLCanvasElement).then(() => {
      setStep(1)
      handleAnimateStart()
    })

    return () => {
      reset(leftTime)
    }
  }, [])

  return (
    <>
      {
        step === 0 && <div className='flex fixed top-0 left-0 z-40 justify-center items-center w-full h-screen'><Loading color='#fff' size={100} /></div>
      }

      {
        step === 1 && <div className='fixed top-0 left-0 z-40 w-full h-screen bg-center bg-no-repeat bg-cover'
          style={{
            backgroundImage: `url(${AniamteImage1}),url(${StartBg})`,
          }}
        />
      }

      <XyzTransitionGroup
        style={{
          backgroundImage: `url(${Bg})`,
        }}
        appear
        appearVisible
        duration="auto"
        xyz="fade small-4 stagger-4 out-duration-0"
        className="min-h-screen pt-[50px] flex flex-col items-center text-[100px] text-white bg-cover bg-top bg-no-repeat relative"
      >

        {
          step === 3 && <h1
            className="w-[940px] h-[532px] bg-cover"
            style={{
              backgroundImage: `url(${Title})`,
            }}
          />
        }

        {
          step === 3 && <img src={Kang} className="w-[718px] h-[984px] object-cover mb-8 -mt-[150px]" alt="" />
        }

        {
          step === 3 && <button
            type="button"
            onClick={() => {
              history.push('/form')
              Log({ eventName: '点击开始预测' })
              reset(leftTime)
            }}
            className="w-[670px] h-[150px] bg-cover bg-no-repeat active:scale-95 relative z-10"
            style={{
              backgroundImage: `url(${Button})`,
            }}
          />
        }

        {
          step === 3 && <p className="mt-4 text-[30px] text-center text-primary">
            {current.seconds}s
            后自动返回首页
          </p>}

        <canvas id='svga-canvas' className='object-cover fixed top-0 bottom-0 left-0 w-full h-screen'></canvas>
      </XyzTransitionGroup>
    </>
  )
}
